<html>  
  <head>  
        <meta charset="utf-8">  
        <title>浙江大学2012年本科生分省录取情况</title> 
  </head> 
<style> 
    div#container{width:1340px}
    div#header {}
    div#chinamap {height:600px;width:660px;float:left;}
    div#histogram {height:600px;width:660px;float:right;}
    .axis path,  
    .axis line{  
        fill: none;  
        stroke: black;  
        shape-rendering: crispEdges;  
    }  
    .axis text {  
        font-family: sans-serif;  
        font-size: 11px; 
    }
</style> 
<body>
    <div id="container">
      <div id="header">
          <h1 style="text-align:center">2012年浙江大学本科生分省录取情况</h1>
      </div>

      <div id="chinamap"> </div>

      <div id="histogram"> </div>   
    </div>
    
<script src="d3.min.js"></script>
<script type="text/javascript">
    var width  = 660;
    var height = 1000;

    var svg = d3.select("#chinamap").append("svg")
        .attr("style", "text-align:center")
        .attr("width", width )
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(0,-40)");
   
    
    var projection = d3.geo.mercator()
        .center([110, 30])
        .scale(600)
        .translate([width/2+50, height/2 - 100]);
    
    var path = d3.geo.path()
        .projection(projection);

    var d2012;
    var csv = d3.dsv(",", "text/csv;charset=gb2312");
    csv("2012.csv", function(error,csvdata){  
    
        if(error){  
            console.log(error);  
        }  
        console.log(csvdata);
        
        d2012 = csvdata;
      
        drawDiagram();
        loadMap();
        loadLegend();
        drawTable();
      
    });
    
    var rootData;
    var provinces = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]; 
    var selected = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    function loadMap() {

      d3.json("china_simplify.json", function(error, root) {
          if (error) 
              return console.error(error);
          console.log(root.features);

          rootData = root;
          root.features.forEach(function(d, i) {  
              var centroid = path.centroid(d);  
              centroid.x = centroid[0];  
              centroid.y = centroid[1];  
              if(d.properties.name == "黑龙江")  
                  centroid.y += 100;  // or cross the border - -!!
              if(d.properties.name == "新疆")  
                  centroid.x += 100;  // or cross the border - -!!
              if(d.properties.name == "内蒙古")  
                  centroid.y += 50;  // or cross the border - -!!
              provinces[match(d.properties.name)] = centroid;  
              //console.log("!!"+provinces)
          });


          svg.selectAll("path")
              .data( root.features )
              .enter()
              .append("path")
              .attr("id", function(d,i) {
                  return d.properties.name;
              })
              .attr("stroke","#000")
              .attr("stroke-width",1)
              .attr("fill", function(d,i) {
                  return colorScale(d.properties.name); 
              })
              .attr("d", path )
              .on("mouseover",function(d,i) {
                  onMouseover(d.properties.name);
              })
              .on("mouseout",function(d,i) {
                  onMouseout(d.properties.name);
              })
              .on("click",function(d,i) {
                  onClick(d.properties.name);
              })
      });

    }

    function onMouseover(name) {

        if(selected[match(name)] == 0)
            d3.select("#"+name)
              .attr("fill","yellow");
        showDetail(name);

        svg2.append("text")
            .attr("id", "value")
            .attr("x", 25+xScale(match(name)))  
            .attr("y", 500 - yScale(applys[match(name)])-6) ////
            .attr("text-anchor", "middle") 
            .attr("font-size", "1px") 
            .text(applys[match(name)]);

    }

    function onMouseout(name) {

        if(selected[match(name)] == 0)
            d3.select("#"+name)
                .transition()
                .duration(200)
                .attr("fill", colorScale(name));
        delDetail();
        svg2.select("#value").remove();

    }

    function onClick(name) {
        selected[match(name)] = 1-selected[match(name)];
        svg.selectAll("path")
            .attr("fill", function(d, i) {
                if(selected[match(d.properties.name)] == 1) 
                    return "yellow"  
                else 
                    return colorScale(d2012[match(d.properties.name)].province);
            });
        svg2.selectAll("#histo")
            .attr("fill", function(d, i) {
                if(selected[i] == 1) 
                    return "yellow"  
                else 
                    return colorScale(d2012[i].province);
            });

        drawTable();

    }

    var cy = [540,510,480,450,420];
    var legCol = ["rgb(196,234,220)","rgb(130,206,235)","rgb(0,191,255)","rgb(30,144,255)","rgb(0,0,255)"];
    function loadLegend() {

        svg.append("text")
           .attr("x", 200) 
           .attr("y", 60) 
           .attr("text-anchor", "right") 
           .attr("font-size", "25px") 
           .text("录取人数全国分布图"); 
        
        svg.selectAll("circle")
           .data(cy)
           .enter() 
           .append("circle") 
           .attr("cx", 100)
           .attr("cy", function(d,i) {
                return height-cy[i]; 
           })
           .attr("r", 10)
           .attr("fill", function(d,i) {
                return legCol[i];
           });
        
        svg.append("text")  
              .attr("x", 120) 
              .attr("y", height-535) 
              .attr("text-anchor", "right") 
              .attr("font-size", "15px") 
              .text("录取人数 <= 20"); 

        svg.append("text")  
              .attr("x", 120) 
              .attr("y", height-505) 
              .attr("text-anchor", "right") 
              .attr("font-size", "15px") 
              .text("录取人数 21~100"); 

        svg.append("text")  
              .attr("x", 120) 
              .attr("y", height-475) 
              .attr("text-anchor", "right") 
              .attr("font-size", "15px") 
              .text("录取人数 101~200"); 

        svg.append("text")  
              .attr("x", 120) 
              .attr("y", height-445) 
              .attr("text-anchor", "right") 
              .attr("font-size", "15px") 
              .text("录取人数 201~300"); 

        svg.append("text")  
              .attr("x", 120) 
              .attr("y", height-415) 
              .attr("text-anchor", "right") 
              .attr("font-size", "15px") 
              .text("录取人数 > 300");
    }

    function colorScale(name) {

        var i = match(name);
        var tot = parseInt(d2012[i].total);
        if(tot <= 20)
            return legCol[0];
        if(tot <= 100)
            return legCol[1];
        if(tot <= 200)
            return legCol[2];
        if(tot <= 300)
            return legCol[3];
        return legCol[4];
    
    }

    function showDetail(name) {

        var n = match(name);

        svg.append("rect")
              .attr("id", "rect") 
              .attr("x", provinces[n].x - 150) 
              .attr("y", provinces[n].y - 150) 
              .attr("width", 100)
              .attr("height", 100)
              .attr("style", "fill:rgb(224,224,224);fill-opacity:0.5");
       
        svg.append("text") 
              .attr("id", "prov") 
              .attr("x", provinces[n].x - 100) 
              .attr("y", provinces[n].y - 125) 
              .attr("text-anchor", "middle") 
              .attr("font-weight", "bold") 
              .text("地区: " + name); 

        svg.append("text") 
              .attr("id", "tot") 
              .attr("x", provinces[n].x - 100) 
              .attr("y", provinces[n].y - 105) 
              .attr("text-anchor", "middle") 
              .attr("font-size", "10px") 
              .text("录取人数: " + d2012[n].total); 

        svg.append("text") 
              .attr("id", "score-art") 
              .attr("x", provinces[n].x - 100) 
              .attr("y", provinces[n].y - 85) 
              .attr("text-anchor", "middle") 
              .attr("font-size", "10px") 
              .text("文科线: " + d2012[n].arts); 

        svg.append("text") 
              .attr("id", "score-sci") 
              .attr("x", provinces[n].x - 100) 
              .attr("y", provinces[n].y - 65) 
              .attr("text-anchor", "middle") 
              .attr("font-size", "10px") 
              .text("理科线: " + d2012[n].science); 
    }

    function delDetail() {
        
        d3.select("#rect").remove();
        d3.select("#prov").remove();
        d3.select("#tot").remove();
        d3.select("#score-art").remove();
        d3.select("#score-sci").remove();

    }

    function match(name) {

        for (var i = 0; i < d2012.length; i++) {
            if(name == d2012[i].province)
                return i;
        };

    }

    /* ================================================= */
    
    var svg2 = d3.select("#histogram").append("svg")
                .attr("width",width)
                .attr("height",height)
                .attr("style", "text-align:center")
                .append("g")
                .attr("transform", "translate(0,0)");   

    var xScale;
    var yScale;
    var applys = [];
    function drawDiagram() {

        for (var i = 0; i < d2012.length; i++) {
            var a = parseInt(d2012[i].apply);
            if(a != 0) {
                // percentage * 1000
                applys[i] = parseInt(d2012[i].total) * 10000 / a; 
                applys[i] = d3.round(applys[i], 1);
            }
            else
                applys[i] = 0;
        };

        xScale = d3.scale.ordinal()  
                   .domain(d3.range(applys.length))  
                   .rangeRoundBands([0,500],0.05);  
                              
        yScale = d3.scale.linear()  
                   .clamp(true)
                   .domain([0,applys[25]+10])
                   .range([0,200]);  

        svg2.selectAll("rect")  
           .data(applys)  
           .enter()  
           .append("rect")  
           .attr("id", "histo")
           .attr("x", function(d,i) {  
                return 20+xScale(i);  
           })  
           .attr("y", function(d,i) {
                return 500 - yScale(d);
           })
           .attr("width", function(d,i) {  
                return xScale.rangeBand();  
           })  
           .attr("height",yScale)  
           .attr("fill",function(d,i) {
                return colorScale(d2012[i].province);
           })
           .on("mouseover", function(d,i) {
              onMouseover(d2012[i].province);
           })
           .on("mouseout", function(d,i) {
              //svg2.select("#value").remove();
              onMouseout(d2012[i].province);
           })
           .on("click",function(d,i) {
              onClick(d2012[i].province);
           });

        var xAxisScale = d3.scale.ordinal()  
                        .domain(d3.range(applys.length))  
                        .rangeRoundBands([0,500]);  
                              
        var yAxisScale = d3.scale.linear()   
                        .domain([0,applys[25]+10])  
                        .range([200,0]);
        
        var xAxis = d3.svg.axis()
                        .scale(xAxisScale)  
                        .orient("bottom")
                        .tickFormat(function(d){return d2012[d].province;});

        var yAxis = d3.svg.axis()  
                        .scale(yAxisScale)  
                        .orient("left"); 

        svg2.append("g")  
            .attr("class","axis")  
            .attr("transform", "translate(20,500)")
            .attr("style", "writing-mode: tb")
            .call(xAxis)
            .selectAll("text")
            .attr("y", 20);  
              
        svg2.append("g")  
            .attr("class","axis")  
            .attr("transform","translate(30,300)")  
            .call(yAxis); 

        svg2.append("text")
            .attr("x", 250) 
            .attr("y", 280) 
            .attr("text-anchor", "middle") 
            .attr("font-size", "20px") 
            .text("各省录取人数占参考总人数百分比");     
        
        svg2.append("text")
            .attr("x", 20) 
            .attr("y", 290) 
            .attr("text-anchor", "middle") 
            .attr("font-size", "10px") 
            .text("*0.01%"); 

        svg2.append("line")
            .attr("x1", 165)
            .attr("y1", 310)
            .attr("x2", 190)
            .attr("y2", 320)
            .attr("style", "stroke:black;stroke-width:1")

        svg2.append("text")
            .attr("x", 230) 
            .attr("y", 20) 
            .attr("text-anchor", "left") 
            .attr("font-size", "25px") 
            .text('数据一览');

        svg2.append("rect")
            .attr("id", "frame") 
            .attr("x", 0) 
            .attr("y", 30) 
            .attr("width", 580)
            .attr("height", 180)
            .attr("style", "fill-opacity:0;stroke:black;");

        svg2.append("text")
            .attr("x", 20) 
            .attr("y", 50) 
            .attr("text-anchor", "left") 
            .attr("font-size", "20px") 
            .text("地区　录取人数 男生人数 女生人数 文科线 理科线 高考总人数");

    }


    /* ================================= */

    function drawTable() {

        svg2.selectAll("#tableValue").remove(); 

        var count = 0;
        var pos = 50;
        for (var i = 0; i < 34; i++) {
          if(count == 5)
              break;
          if(selected[i] == 1) {
              count++;
              pos += 30;
              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 40) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].province);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 120) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].total);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 200) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].male);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 290) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].female);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 365) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].arts);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 430) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].science);

              svg2.append("text")
                  .attr("id", "tableValue")
                  .attr("x", 515) 
                  .attr("y", pos) 
                  .attr("text-anchor", "middle") 
                  .attr("font-size", "20px") 
                  .text(d2012[i].apply);
          }
        };

    }

</script>
  
</body>  
</html>  